<html>
<head>
	<title>ztree</title>
	<!--<link rel="stylesheet" type="text/css" href="${ctxPath}/common/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="${ctxPath}/common/zTree/css/metroStyle/metroStyle.css"/>

	<link rel="stylesheet" type="text/css" href="${ctxPath}/common/bootstrap-table/bootstrap-table.css"/>

	<script type="text/javascript" src="${ctxPath}/common/js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="${ctxPath}/common/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctxPath}/common/zTree/js/jquery.ztree.all.js"></script>

	<script type="text/javascript" src="${ctxPath}/common/bootstrap-table/bootstrap-table.js"></script>
	<script type="text/javascript" src="${ctxPath}/common/bootstrap-table/bootstrap-table-zh-CN.js"></script>
-->
	<%
	include("../inc/lib.html",{title:'主题'}){}
	%>

	<script type="text/javascript">

		var setting = {
			view: {
				selectedMulti: false
			},
			check: {
				enable: true,
				chkboxType: { "Y": "", "N": "" }
			},
			async: {
				enable: true,
				url:"${ctxPath}/tree/getTreeByPid",
				autoParam:["id", "pid"]
			},
			callback: {
				beforeCheck: function(treeId, treeNode){
					//var treeObj = $.fn.zTree.getZTreeObj(treeId);
					//treeObj.cancelSelectedNode();
					//treeObj.checkAllNodes(false);
					//var checkedNode = treeObj.getCheckedNodes()[0];
					//treeObj.selectNode(checkedNode);
				},
				onCheck: function(event, treeId, treeNode){
					var treeObj = $.fn.zTree.getZTreeObj(treeId);
					treeObj.cancelSelectedNode();
					treeObj.checkAllNodes(false);
					treeObj.checkNode(treeNode, true, true);
					treeObj.selectNode(treeNode);
				},
				beforeClick: function(treeId, treeNode, clickFlag){

				},
				onClick: function(event, treeId, treeNode){
					var treeObj = $.fn.zTree.getZTreeObj(treeId);
					treeObj.cancelSelectedNode();
					treeObj.checkAllNodes(false);
					treeObj.checkNode(treeNode, true, true);
					treeObj.selectNode(treeNode);
//					treeObj.expandNode(treeNode,true,true,true);
				}
			}
		};

		$(document).ready(function(){

			//ztree init
			$.fn.zTree.init($("#tree"), setting);

			var $regionsTable = $('#regionsTable');

			$regionsTable.bootstrapTable({
				height:$(document).height()-200,
				striped:true,
				pagination:true,
				pageNumber:1,
				pageSize:10,
				pageList:[10, 25, 50, 100, -1],
				search:true,
				searchOnEnterKey:true,
				showRefresh:true,
				showToggle:true,
				detailView:true,
				singleSelect: true,
				columns:[
					{
						field:'state',
						checkbox:true
					},
					{
						field: 'id',
						title: '序号',
						width: 100,
						align: 'center',
						valign: 'middle',
						sortable: true
					},
					{
						field: 'name',
						title: '姓名',
						width: 100,
						align: 'center',
						valign: 'middle',
						sortable: true
					},
					{

						field: 'gender',
						title: '性别',
						width: 40,
						align: 'left',
						valign: 'top',
						sortable: true
					},
					{
						field: 'birthday',
						title: '出生日期',
						width: 80,
						align: 'left',
						valign: 'top',
						sortable: true
					},
					{
						field: 'ctfId',
						title: '身份证',
						width: 80,
						align: 'middle',
						valign: 'top',
						sortable: true
					},
					{
						field: 'address',
						title: '地址',
						width: 180,
						align: 'left',
						valign: 'top',
						sortable: true
					},
					{
						field: 'tel',
						title: '固定电话',
						width: 100,
						align: 'left',
						valign: 'top',
						sortable: true
					},
					{
						field: 'mobile',
						title: '手机号码',
						width: 100,
						align: 'left',
						valign: 'top',
						sortable: true

					},
					{
						field: 'operate',
						title: '操作',
						width: 100,
						align: 'center',
						valign: 'middle'
					}
				],
				data:[
					{
						id:1,
						name:'aaa'
					},
					{
						id:2,
						name:'bbb'
					},
					{
						id:3,
						name:'ccc'
					},
					{
						id:1,
						name:'ddd'
					},
					{
						id:1,
						name:'fff'
					},
					{
						id:1,
						name:'ggg'
					},
					{
						id:1,
						name:'hhh'
					},
					{
						id:1,
						name:'iii'
					},
					{
						id:1,
						name:'jjj'
					},
					{
						name:'kkk'
					},
					{
						name:'lll'
					},
					{
						name:'mmm'
					},
					{
						name:'nnn'
					},
					{
						name:'ooo'
					},
					{
						name:'ppp'
					},
					{
						name:'qqq'
					},
					{
						name:'rrr'
					},
					{
						name:'sss'
					}
				]
			});
		});

	</script>
</head>
<body>
<div class="container-fluid panel panel-default" style="margin:20px;">
	<div class="row">
		<div class="col-sm-3">
			<ul id="tree" class="ztree"></ul>
		</div>
		<div class="col-sm-9">
			<table id="regionsTable"></table>
		</div>
	</div>
</div>
<%
include("../inc/footer.html",{title:'主题'}){ }
%>
</body>
</html>
